<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 300px;
        height: 500px;
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <!-- 聊天室的前端，使用浏览器自带的websocket -->
    <div id="app">
      <div class="box"></div>
      <input type="text" />
      <button>发送</button>
    </div>

    <script>
      // 心跳检测,每隔大概半分钟，前端给后端发一个无用的信息过去

      const name = prompt("请输入姓名");
      const id = new Date().getTime();
      const button = document.querySelector("button");
      const input = document.querySelector("input");
      const box = document.querySelector(".box");

      // 创建一个websocket连接,连接本机的8080端口
      const ws = new WebSocket("ws://10.31.169.53:8080");

      // 打开连接的回调
      ws.onopen = function (evt) {
        console.log("Connection open ...");
        // 向后端发送一个字符串
        // ws.send("Hello WebSockets!");

        setInterval(() => {
          ws.send("1");
        }, 30000);
      };

      // 监听收到后端的信息
      ws.onmessage = function (evt) {
        // console.log("Received Message: " + evt.data);
        // 手动关闭
        // ws.close();
        // 将接受到的内容放到容器去展示
        const { name, value, id: id2 } = JSON.parse(evt.data);
        // 如果返回的id和原先自己的id是相同，我们认为就是自己发的
        if (id2 === id) {
          box.innerHTML +=
            "<div style='text-align: right'>" +
            name +
            "说：" +
            value +
            "</div>";
        } else {
          box.innerHTML +=
            "<div style='text-align: left'>" + name + "说：" + value + "</div>";
        }
      };

      // 监听连接关闭
      ws.onclose = function (evt) {
        console.log("Connection closed.");
      };

      button.onclick = () => {
        // 点击按钮将input的内容发送给后端
        // 把名字一起发过去，websocket只支持发送字符串
        ws.send(
          JSON.stringify({
            name,
            id,
            value: input.value,
          })
        );
        // 清空内容
        input.value = "";
      };
    </script>
  </body>
</html>
